<template>
  <div class="container">
    <div class="header">
      <div class="header-left-item">
        <div><img id="user-avatar-img" :src="circleUrl" alt="" /></div>
        <div>
          <h2>{{ userInfo.universityName }}-学院档案录入</h2>
        </div>
      </div>
      <div class="header-right-item">
        <el-button type="primary" round @click="addFile">录入档案</el-button>
      </div>
    </div>
    <div class="my-content">
      <div class="my-content-item">
        <el-form
          label-position="right"
          label-width="120px"
          :model="collegeInfo"
        >
          <el-form-item label="学院名称：">
            <el-input v-model="collegeInfo.name"></el-input>
          </el-form-item>
          <el-form-item label="学院简介：">
            <el-input
              type="textarea"
              :rows="4"
              placeholder="请输入内容："
              v-model="collegeInfo.introduction"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="学院地址：">
            <el-input v-model="collegeInfo.address"></el-input>
          </el-form-item>
          <el-form-item label="学院联系方式：">
            <el-input v-model="collegeInfo.phone"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { downloadAvatar, getUserDetails, addCollege } from "@/api";
import { validPhone } from "@/utils/validate";
export default {
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //默认头像
      userInfo: {}, //管理员基本信息
      collegeInfo: {
        universityId: "",
        name: "",
        introduction: "",
        address: "",
        phone: "",
      },
    };
  },
  created() {
    this.downloadManagerAvatar();
    this.initUserInfo();
  },
  methods: {
    //下载用户头像
    async downloadManagerAvatar() {
      let params = {
        avatarUrl: this.$store.state.user.userInfo.avatarUrl,
      };
      let res = await downloadAvatar(params);
      let avatar_img = document.querySelector("#user-avatar-img");
      let imageType = res.type; //获取图片类型
      const blob = new Blob([res], { type: imageType });
      const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob);
      avatar_img.src = imageUrl;
      avatar_img.onload = function (e) {
        window.URL.revokeObjectURL(avatar_img.src); //释放URL.createObjectURL()创建的对象
      };
    },
    async initUserInfo() {
      let res = await getUserDetails();
      if (res.code !== 0) {
        this.$message.error("获取用户基本信息失败");
        return;
      }
      this.userInfo = res.data;
    },
    //录入学院档案
    async addFile() {
      let name = this.collegeInfo.name;
      let address = this.collegeInfo.address;
      let introduction = this.collegeInfo.introduction;
      let phone = this.collegeInfo.phone;
      if (
        name.trim() == "" ||
        address.trim() == "" ||
        introduction.trim() == ""
      ) {
        this.$message.warning("学院名称、学院地址、学院简介不允许为空");
        return;
      }
      if (!validPhone(phone)) {
        this.$message.warning("学院联系方式格式有误");
        return;
      }
      //发送录入档案请求
      this.collegeInfo.universityId = this.userInfo.universityId;
      let res = await addCollege(this.collegeInfo);
      if (res.code == 0) {
        this.$message.success("录入档案成功");
        this.clearCollegeInfo();
      } else {
        this.$message.error(res.msg);
      }
    },
    clearCollegeInfo() {
      this.collegeInfo.name = "";
      this.collegeInfo.introduction = "";
      this.collegeInfo.address = "";
      this.collegeInfo.phone = "";
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background: #f0f2f5;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.header {
  border-radius: 10px 10px 0px 0px;
  display: flex;
  align-items: center;
  width: 70%;
  justify-content: space-between;
  background: rgb(255, 255, 255);
  border-bottom: 1px solid rgb(217, 212, 212);
  .header-left-item {
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    div {
      margin: 5px;
    }
  }
  .header-right-item {
    padding-right: 70px;
  }
}
.my-content {
  padding-bottom: 30px;
  border-radius: 0px 0px 10px 10px;
  background: rgb(255, 255, 255);
  width: 70%;
  .my-content-item {
    padding-right: 30px;
    padding-top: 20px;
  }
}

#user-avatar-img {
  height: 90px;
  width: 90px;
  border-radius: 50px;
}
</style>